<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link type="css/style.css rel=" stylesheet" />

</head>

<body>
  <div id="box">
    <div class="head">
      <h2>记事本</h2>
      <p>记录生活点点滴滴，写下生活每一个美好</p>
      <div class="input">
        <span>内容</span>
        <input type="text" name="" id="" placeholder="请输入你要记事的内容" @keyup.enter="add" v-model="keyword" />
        <span @click="add">确认</span>
      </div>
    </div>
    <ul class="list">
      <li v-for="(item,index) in list" :key="index">
        <span class="xh">{{index+1}}</span>
        <span>这</span>
        <span class="qc" @click="del(index)"></span>
      </li>
      <li>
        <b>总条数：{{list.length}}</b>
        <b @click="delAll">清除</b>
      </li>
    </ul>
  </div>
  <script src="./js/vue.js"></script>
</body>

</html>
<script>
  const vm = new Vue({
    el: "#box",
    data() {
      return {
        keyword: "",
        list: []
      }
    },
    methods: {
      add() {
        this.list.push(this.keyword)
        this.keyword = ""
      },
      // 删除
      del(index) {
        this.list.splice(index, 1)
      },
      //全删除
      delAll() {
        this.list = []
      }
    },
  })
</script>
<style>
  /* @charset "utf-8"; */

  * {
    padding: 0;
    margin: 0;
  }

  ul {
    list-style: none;
  }

  body {
    background-color: #2d2d2d;
  }

  #box {
    width: 800px;
    margin: 50px auto;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    border-radius: 5px;
    overflow: hidden;
  }

  #box .head {
    background-color: #DFF0D8;
    padding: 20px;
  }

  #box .head h2 {
    color: #3C763D;
  }

  #box .head p {
    font-size: 12px;
    color: #3C763D;
    line-height: 30px;
  }

  #box .head .input {
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    background-color: #EEEEEE;
    overflow: hidden;
    border: 1px solid #ccc;

  }

  #box .head .input span {
    display: inline-block;
    width: 50px;
    height: 30px;
    text-align: center;
    font-size: 12px;
    float: left;
  }

  #box .head .input input {
    float: left;
    width: calc(100% - 102px);
    border: none;
    outline: none;
    height: 30px;
    text-indent: 20px;
  }

  #box .head .input span:first-child {
    border-right: 1px solid #ccc;
  }

  #box .head .input span:last-child {
    border-left: 1px solid #ccc;
    cursor: pointer;
  }

  #box .list {
    padding: 20px;
  }

  #box .list li {
    border-bottom: 1px dashed #ccc;
    height: 40px;
    font-size: 14px;
    color: #2D2D2D;
  }

  #box .list li:last-child {
    line-height: 40px;
    border-bottom: none;
    padding: 0 20px;
  }

  #box .list li span {
    float: left;
    height: 20px;
    line-height: 20px;
    margin: 10px 0;
    text-align: center;
  }

  #box .list li span:first-child {
    width: 50px;
    border-right: 1px solid #ccc;
    margin-right: 10px;
  }

  #box .list li span:last-child {
    width: 30px;
    background: url(../img/icon.png) no-repeat center center;
    background-size: 50%;
    float: right;
    margin-right: 20px;
    cursor: pointer;
  }

  #box .list li:last-child b:first-child {
    float: left;
  }

  #box .list li:last-child b:last-child {
    float: right;
    cursor: pointer;
  }
</style>